<template>
	<view class="content">
		<view class="qr_code" @click="goPay">
			<view class="box1">
				<img src="@/static/images/paymentCode.png" alt="" srcset="">
				<view class="">
					付款码
				</view>
			</view>
		</view>
		<view class="zhifu">
			<view style="position: relative;">

				<view class="init" :class="currentIndex == 0 ? 'active' : 'daxiao'" @click="aliPay">
					<img src="../../static/images/ff.png" alt="">
					<view class="">
						支付宝
					</view>

				</view>
				<div class="selected" v-if="currentIndex == 0"></div>
			</view>
			<view class="init">
				
			</view>
			<!-- <view style="position: relative;">
				<view class="init" :class="currentIndex == 1 ? 'active' : 'daxiao'" @click="wxPay">
					<img src="../../static/images/ee.png" alt="">
					<view class="">
						微信
					</view>
				</view>
				<div class="selected" v-if="currentIndex === 1"></div>
			</view> -->
		</view>
		<!-- <view class="account "> -->
		<!-- <view class="text">
				提现支付宝:{{withdrawalInfo.aliName}}({{withdrawalInfo.aliAccountNumber}})
			</view>
			<view class="switch" @click="payWay(1)">
				<view class="text">
					切换账号
				</view>
				<img src="@/static/images/right.png" alt="" srcset="">
			</view> -->
		<view class="pay" v-if="currentIndex == 0" @click="payWay(1)">
			<view class="way">
				提现支付宝：
			</view>
			<view class="way1">
				{{withdrawalInfo.payAccount}}
			</view>
			<view class="account-number">
				<view class="text">
					切换账号
				</view>
				<img src="../../static/images/right.png" alt="" srcset="">
			</view>
		</view>
		<!-- <view class="pay" v-if="currentIndex == 1" @click="payWay(2)">
			<view class="way">
				提现微信：
			</view>
			<view class="way1">
				{{withdrawalInfo.payAccount}}
			</view>
			<view class="account-number">
				<view class="text" style="margin-left: 25rpx;">
					切换账号
				</view>
				<img src="../../static/images/right.png" alt="" srcset="">
			</view>
		</view> -->
		<!-- </view> -->
		<!-- <view class="header bot">
			<view class="alipay">
				<img src="@/static/images/ee.png" alt="" srcset="">
				<view class="text">
					微信
				</view>
			</view>
		</view>
		<view class="account">
			<view class="text">
				提现微信:({{withdrawalInfo.wxAccountNumber}})
			</view>
			<view class="switch" @click="payWay(2)">
				<view class="text">
					切换账号
				</view>
				<img src="@/static/images/right.png" alt="" srcset="">
			</view>
		</view> -->
		<view class="withdrawal">
			<view class="amount">
				<view class="txt">
					提现金额
				</view>
				<view class="red">
					单笔提现至少100元
				</view>
			</view>
			<view class="ipt-amount">
				<span>￥</span>
				<input type="text" style="font-size: 50rpx;" placeholder="输入提现金额" placeholder-class="ipt"
					v-model.trim="withdrawalInfo.moneyAmount">
			</view>
			<view class="line">

			</view>
			<view class="money">
				可提现金额￥{{integralMoney}}
			</view>
		</view>
		<view class="instructions">
			<view class="tixian1">
				<img src="../../static/images/cc.png" alt="">
				<view class="fanshi">
					提现说明
				</view>
			</view>
			<view class="three">
				<div>
					1.同一用户每天仅可提现1次；
				</div>
				<div>
					2.提现申请将在1-3个工作日内审批到账,请耐心等待；
				</div>
				<div>
					3.查询提现到账:微信-我-钱包-零钱-零钱明细,支付宝-我的-账单
				</div>
			</view>
		</view>
		<view class="tixian-btn" @click="confirm">
			立即提现
		</view>
		<view class="tixian-btn1" @click="look">
			查看提现记录
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import {
		checkMoneyAmount
	} from '../../utils/validate.js'
	export default {
		data() {
			return {
				currentIndex: 0,
				integralMoney: '',
				page: 1,
				limit: 5,
				addressList: {},
				cardNum: '',
				withdrawalInfo: {
					withdrawType: 1,
					payAccount: '',
					// payAccount1: '',
					withdrawIntegral: 0,
					moneyAmount: '',
					state: 1
				},
				money: ''
			}
		},

		methods: {
			getAccountList() {
				request.get('/api/user/withdraw/list', {
					withdrawType: this.withdrawalInfo.withdrawType
				}).then(res => {
					if (res.code == 0) {
						res.data.reverse()
						this.withdrawalInfo.payAccount = res.data[0].payAccount
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			aliPay() {
				this.currentIndex = 0
				this.withdrawalInfo.withdrawType = 1
				this.withdrawalInfo.moneyAmount = ''
			},
			wxPay() {
				this.currentIndex = 1
				this.withdrawalInfo.withdrawType = 2
				this.withdrawalInfo.moneyAmount = ''
				this.getAccountList()
			},
			payWay(Pay) {
				if (Pay == 1) {
					uni.navigateTo({
						//保留当前页面，跳转到应用内的某个页面
						url: `/pagesA/integral/accountInfo?Pay=${Pay}`
					})
				} else {
					uni.navigateTo({
						//保留当前页面，跳转到应用内的某个页面
						url: `/pagesA/integral/accountInfo?Pay=${Pay}`
					})
				}
			},
			goPay() {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pagesA/qr-code/qr-code'
				})
			},
			confirm() {
				let that = this
				if (!checkMoneyAmount(this.withdrawalInfo.moneyAmount, this.integralMoney)) {
					return false
				} else
				if (this.withdrawalInfo.payAccount == '' || this.withdrawalInfo.payAccount == undefined || this
					.withdrawalInfo.payAccount == null) {
					uni.showToast({
						title: '请先添加提现账号',
						duration: 2000,
						icon: 'none'
					});
				} else {
					this.withdrawalInfo.moneyAmount = Number(this.withdrawalInfo.moneyAmount)
					this.withdrawalInfo.withdrawIntegral = this.withdrawalInfo.moneyAmount * 100 
					uni.showModal({
						content: '你确定要添加提现记录吗?',
						success: function(res) {
							if (res.confirm) {
								request.post('/api/withdraw/record/add',
									that.withdrawalInfo
								).then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '提现成功,请耐心等待,在提现记录中查看',
											duration: 2000,
											icon: 'none'
										});
										setTimeout(() => {
											uni.navigateTo({
												//保留当前页面，跳转到应用内的某个页面
												url: '/pagesA/integral/record'
											})
										}, 2000)
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none',
											duration: 2000
										})
									}
								})
							} else if (res.cancel) {
					
							}
						}
					});
					

				}
			},
			look() {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pagesA/integral/record'
				})
			},
			// 获取用户积分
			getInteger() {
				request.get('/api/user/detail', {
				}).then(res => {
					if (res.code == 0) {
						this.integralMoney = res.data.integral / 100
					}
				})
			},
		},
		onLoad(option) {
			if (option.withdrawType == 1) {
				this.currentIndex = 0
				this.withdrawalInfo.withdrawType = option.withdrawType
			}
			if (option.withdrawType == 2) {
				this.currentIndex = 1
			}
			if (option.payAccount != undefined) {
				this.withdrawalInfo.payAccount = option.payAccount
			}else{
				this.getAccountList()
			}
		},
		onShow() {
			this.getInteger() 
		}
	}
</script>

<style lang="less" scoped>
	.toast {
		background-color: white;
		/* 设置弹窗背景色为白色 */
	}

	.qr_code {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		margin-bottom: 20rpx;
		padding: 0 56rpx;

		.box1 {
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				width: 50rpx;
				height: 50rpx;
				padding-right: 12rpx;
			}
		}
	}

	.content {
		background: #F1F4F9;
		padding-top: 20rpx;
		height: 100vh;

		.zhifu {
			// padding: 20rpx 20rpx 0 20rpx;
			padding: 20rpx 56rpx 0 56rpx;
			display: flex;
			// justify-content: space-around;
			background: #FFFFFF;

			.daxiao {
				width: 282rpx;
				height: 92rpx;

				background: url('../../static/images/aa.png');
				background-size: 100% 100%;

				img {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.init {
				display: flex;
				justify-content: space-around;
				align-items: center;

				// border-radius: 15rpx; 
				img {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.daxiao:focus {
				// border-color: blue;
				// width: 0;
				// height: 0;
				// background-size: 0 0;
				border: 0
			}

			.active {

				// color: rgb(80, 179, 252);
				width: 282rpx;
				height: 92rpx;
				background: url('../../static/images/hh.png') no-repeat;
				background-size: 100% 100%;

			}

			// .selected:after {
			// 	content: "";
			// 	position: absolute;
			// 	top: 0;
			// 	right: 0;
			// 	// border-bottom: 25px solid rgb(80, 179, 252);
			// 	// border-left: 25px solid transparent;

			// 	border-top: 25px solid rgb(80, 179, 252);
			// 	border-left: 25px solid transparent;
			// 	// border-top-right-radius: 15rpx; /* 添加这一行 */
			// 	// border-top-left-radius: 15rpx;
			// 	// border-bottom-right-radius:15rpx;
			// 	// border-bottom-left-radius: 15rpx;
			// }

			// .selected:before {
			// 	content: '';
			// 	position: absolute;
			// 	width: 11px;
			// 	height: 5px;
			// 	background: transparent;
			// 	top: 3px;
			// 	right: 1px;
			// 	border: 2px solid white;
			// 	border-top: none;
			// 	border-right: none;
			// 	-webkit-transform: rotate(-55deg);
			// 	-ms-transform: rotate(-55deg);
			// 	transform: rotate(-55deg);
			// 	z-index: 9;
			// }
		}

		.header {
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-around;
			// align-items: center;
			padding: 0 56rpx;

			.wei-xin {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;

				img {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.alipay {
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 50rpx;
					height: 50rpx;
				}

				.text {
					padding-left: 12rpx;
				}
			}
		}

		// .account {
		// 	display: flex;
		// 	justify-content: space-between;
		// 	padding: 0 56rpx;
		// 	height: 60rpx;
		// 	background: #FFFFFF;
		// .text {

		// 	font-family: Source Han Sans SC;
		// 	font-weight: 400;
		// 	font-size: 24rpx;
		// 	color: #000000;
		// 	opacity: 0.45;
		// }

		// .switch {
		// 	display: flex;

		// 	// line-height: 60rpx;
		// 	img {
		// 		width: 10rpx;
		// 		height: 20rpx;
		// 		padding-top: 6rpx;
		// 		padding-left: 16rpx;
		// 	}
		// }
		.pay {
			display: flex;
			align-items: center;
			// justify-content: space-between;

			// padding-left: 66rpx;
			// margin-top: 20rpx;
			// margin-right: 56rpx;

			padding: 0 56rpx;
			background-color: #FFFFFF;

			.way {
				height: 50rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				opacity: 0.45;
				line-height: 50rpx;
			}

			.way1 {
				width: 55%;
				height: 50rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				opacity: 0.45;
				line-height: 50rpx;
			}

			.account-number {
				display: flex;
				align-items: center;

				.text {
					height: 50rpx;
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 50rpx;
					opacity: 0.45;
					padding-right: 16rpx;
				}

				img {
					// margin-top: 4rpx;
					width: 10rpx;
					height: 20rpx;
				}
			}
		}

		// }

		.bot {
			margin-top: 20rpx;
		}

		.withdrawal {
			margin-top: 20rpx;
			padding: 25rpx 56rpx 0 56rpx;
			background: #FFFFFF;

			.amount {
				display: flex;
				justify-content: space-between;
				font-family: Source Han Sans SC;
				font-weight: bolder;
				font-size: 30rpx;
				color: #000000;

				.red {
					font-size: 26rpx;
					color: red;
				}
			}

			.ipt-amount {
				display: flex;
				// 关键 span标签和input框居中
				align-items: center;
				font-family: Source Han Sans SC;
				font-weight: bolder;
				font-size: 50rpx;
				color: #000000;
				height: 100rpx;
				line-height: 100rpx;

				.ipt {
					color: gray;
					font-size: 50rpx;
				}
			}

			.line {
				width: 100%;
				height: 1rpx;
				background-color: lightgray;
			}

			.money {
				height: 100rpx;
				line-height: 100rpx;
			}
		}

		.instructions {
			margin-top: 20rpx;
			padding: 25rpx 56rpx;
			background: #FFFFFF;

			.tixian1 {
				display: flex;
				align-items: center;

				img {
					width: 6rpx;
					height: 24rpx;
				}

				.fanshi {
					padding-left: 20rpx;
				}
			}

			.three {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				opacity: 0.85;
			}
		}

		.tixian-btn {
			position: fixed;
			bottom: 10vh;
			width: 90%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background: var(--global-bg-color);
			color: white;
			border-radius: 50rpx;
			// margin: 20rpx 5%;
			margin: 0 5%;
		}

		.tixian-btn1 {
			position: fixed;
			bottom: 2vh;
			width: 90%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background-color: lightgray;
			color: white;
			border-radius: 50rpx;
			// margin: 20rpx 5%;
			margin: 0 5%;
		}
	}
</style>